<template>
  <a-space v-if="!record.status">
    <slot name="prefix" />
    <a-button type="primary" @click="updateStatus(1)">审核通过</a-button>
    <a-button danger type="primary" @click="updateStatus(2)">审核不通过</a-button>
    <slot />
  </a-space>
  <a-space v-else-if="record.status === 1">
    <slot name="prefix" />
    <a-button danger type="primary" @click="updateStatus(2)">审核不通过</a-button>
    <a-button danger type="primary" @click="updateStatus(3)">下线</a-button>
    <slot />
  </a-space>
  <a-space v-else-if="record.status === 2">
    <slot name="prefix" />
    <a-button type="primary" @click="updateStatus(1)">审核通过</a-button>
    <slot />
  </a-space>
  <div v-else><slot name="prefix" /><slot />{{ emptyText }}</div>
</template>
<script lang="ts">
import { message, Modal } from "ant-design-vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    record: {
      required: true,
      type: Object,
    },
    updateAction: {
      required: true,
      type: Function,
    },
    refreshPagination: {
      required: true,
      type: Function,
    },
    emptyText: String,
  },
  setup(props) {
    function updateStatus(value) {
      Modal.confirm({
        content: ["", "确认审核通过吗？", "确认审核不通过吗？", "确认下线吗？"][value],
        title: "温馨提示",
        onOk: async () => {
          const re = await props.updateAction({
            id: props.record.id,
            status: value,
          });
          if (re) {
            message.success("操作成功");
            await props.refreshPagination();
          }
        },
      });
    }
    return {
      updateStatus,
    };
  },
});
</script>
